<template>
	<div class="goodslist_div">
		<div class="header_div">
			<p class="btn_back" @click="btn_back">返回</p>
			商品列表
		</div>
		<mt-navbar>
			<mt-tab-item id="1" class="colorA9" :class="active === 'XL'?'colorFF226':''" >
				销量
				<img src="../../assets/img/sortUp_down.png" v-show="XL_type == 0" class="sortImg"  @click="btn_sortXL(XL_type)" alt="" style="right: 14px;">
				<img src="../../assets/img/sortDown_W.png" class="sortImg" v-show="XL_type == 1"  @click="btn_sortXL(XL_type)" alt="" style="right: 14px;">
				<img src="../../assets/img/sortUp_W.png"  class="sortImg" v-show="XL_type == 2"  @click="btn_sortXL(XL_type)" alt="" style="right: 14px;">
			</mt-tab-item>
			<!--@click.native.prevent="active = 'XL'"-->
			<mt-tab-item id="2" class="colorA9" :class="active === 'RQ'?'colorFF226':''" >
				人气
				<img src="../../assets/img/sortUp_down.png" v-show="RQ_type == 0" class="sortImg"  @click="btn_sortRQ(RQ_type)" alt="" style="right: 14px;">
				<img src="../../assets/img/sortDown_W.png" class="sortImg" v-show="RQ_type == 1"  @click="btn_sortRQ(RQ_type)" alt="" style="right: 14px;">
				<img src="../../assets/img/sortUp_W.png"  class="sortImg" v-show="RQ_type == 2"  @click="btn_sortRQ(RQ_type)" alt="" style="right: 14px;">
			</mt-tab-item>
			<!--@click.native.prevent="active = 'RQ'"-->
			<mt-tab-item id="3" class="colorA9" :class="active === 'JG'?'colorFF226':''" >
				价格
				<img src="../../assets/img/sortUp_down.png" v-show="JG_type == 0" class="sortImg"  @click="btn_sortJG(JG_type)" alt="" style="right: 14px;">
				<img src="../../assets/img/sortDown_W.png" class="sortImg" v-show="JG_type == 1"  @click="btn_sortJG(JG_type)" alt="" style="right: 14px;">
				<img src="../../assets/img/sortUp_W.png"  class="sortImg" v-show="JG_type == 2"  @click="btn_sortJG(JG_type)" alt="" style="right: 14px;">
			</mt-tab-item>
			</mt-tab-item>
			<!--@click.native.prevent="active = 'JG'"-->
        </mt-navbar>
        <mt-tab-container v-model="active" swipeable >
			<mt-tab-container-item id="XL">
				<youlike-com :GOODSLIST= "goodsList"></youlike-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="RQ">
				<youlike-com></youlike-com>
			</mt-tab-container-item>
			<mt-tab-container-item id="JG">
				<youlike-com></youlike-com>
			</mt-tab-container-item>
		</mt-tab-container>
	</div>
</template>
<script>
	import youlike from './youlike.vue'
	export default{
		name:'goodslist',
		data(){
			return {
				active:'XL',
				XL_type:0,
				RQ_type:0,
				JG_type:0,

			}
		},
		components:{
            "youlike-com": youlike,
        },
		methods:{
			btn_back:function(){
				this.$router.go(-1);
			},
			//销量 排序
			btn_sortXL:function(nowType){
				console.log(nowType)
				this.XL_type = (nowType==1)?2:1;
				//this.$store.dispatch()
			},
			//人气排序
			btn_sortRQ:function(nowType){

			},
			//价格排序
			btn_sortJG:function(nowType){

			}
		},
		computed:{
			goodsList(){
				return this.$store.state.goods.data_goodsList;
			}
		},
		mounted:function(){
			//console.log(this.$route.params)// 输出参数
			//this.$store.dispatch("get_goodsList")
		},
		watch:{
        	// 目的地推荐切换
        	active(curVal,oldVal){
        		if(curVal == "XL"){
        			this.XL_type = 0;
        			this.RQ_type = 0;
        			this.JG_type = 0;
        			//this.mudidi = this.$store.state.index.selectionList_one;
        		}else if(curVal == "RQ"){
        			this.XL_type = 0;
        			this.RQ_type = 0;
        			this.JG_type = 0;
        			//this.mudidi = this.$store.state.index.selectionList_two;
        		}else if(curVal == "JG"){
        			this.XL_type = 0;
        			this.RQ_type = 0;
        			this.JG_type = 0;
        			//this.mudidi = this.$store.state.index.selectionList_three;
        		}
        	}
        }

	}
</script>
<style rel="stylesheet" lang="scss" scoped>
	.goodslist_div{
		.header_div{
			background-color: #FFF;
	    	color: #000;
		}
		.youlike_tip{
			display: none;
		}
		.sortImg{
			right: 14px;
		    position: absolute;
		    top: -3px;
		    width: 20px;
		    height: 20px;
		}
	}
</style>